<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="page-view-size" content="1280*720"/>
    <title>专题页2222</title>
    <style type="text/css">
        /* ---Reset srart---*/
        body, div, table, caption, tbody, tfoot, thead, tr, th, td{
            margin:0px;
            padding:0px;
            border:0px;
        }
        html,
        body {
            width: 1280px;
            height: 720px;
            font-size: 28px;
            color: #fff;
            font-family: "微软雅黑";
            line-height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .aim {
            position: absolute;
        }
        .package {
            position: absolute;
            width: 1280px;
            height: 720px;
        }
        .package .header {
            position: absolute;
            top:0px;
            left: 0px;
            width: 1280px;
            height: 115px;
            line-height: 115px;
        }
        .package .header .txt{
            position: absolute;
            left: 40px;
            font-size: 55px;
            font-weight: bold;
            letter-spacing: 0px;
            color: #f6832d;
        }
        /*第一页*/
        .package .special1{
            position: absolute;
            top: 115px;
            left: 40px;
        }
        .package .special1 .line1{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .package .special1 .line1 .aim{
            width: 610px;
            height: 265px;
            left: -10px;
            top: -10px;
            position: absolute;
            transform: scale(1);
            -o-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .package .special1 .line1 .aimon{
            background: url(images/special1-line1Aimon.png) no-repeat;
            z-index: 4;
            position: absolute;
        }
        .package .special1 .line1 .aim .pic{
            width: 590px;
            height: 245px;
            left: 10px;
            top: 10px;
            position: absolute;
        }
        .package .special1 .line1 .aim .pic img{
            border-radius: 7px;
        }
        .package .special1 .line2{
            position: absolute;
            top: 265px;
            left: 0px;
        }
        .package .special1 .line2 .aim{
            width: 404px;
            height: 210px;
            left: -10px;
            top: -10px;
            position: absolute;
            transform: scale(1);
            -o-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .package .special1 .line2 .aimon{
            background: url(images/special1-line2Aimon.png) no-repeat;
            z-index: 4;
            position: absolute;
        }
        .package .special1 .line2 .aim .pic{
            width: 384px;
            height: 190px;
            left: 10px;
            top: 10px;
            position: absolute;
        }
        .package .special1 .line2 .aim .pic img{
            border-radius: 7px;
        }
        /*第二页*/
        .package .special2{
            position: absolute;
            top: 570px;
            left: 40px;
        }
        .package .special2 .special2-header{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 1280px;
            height: 80px;
            line-height: 80px;
        }
        .package .special2 .special2-header .txt{
            position: absolute;
            left: 0px;
            font-size: 38px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #fff;
        }
        .package .special2 .review1{
            position: absolute;
            top: 80px;
            left: 0px;
        }
        .package .special2 .review1 .aim{
            width: 610px;
            height: 210px;
            left: -10px;
            top: -10px;
            position: absolute;
            transform: scale(1);
            -o-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .package .special2 .review1 .aimon{
            background: url(images/special2-line1Aimon.png) no-repeat;
            z-index: 4;
            position: absolute;
        }
        .package .special2 .review1 .aim .pic{
            width: 590px;
            height: 190px;
            left: 10px;
            top: 10px;
            position: absolute;
        }
        .package .special2 .review1 .aim .pic img{
            border-radius: 7px;
        }

        .package .special2 .review2{
            position: absolute;
            top: 290px;
            left: 0px;
        }
        .package .special2 .review2 .aim{
            width: 1220px;
            height: 210px;
            left: -10px;
            top: -10px;
            position: absolute;
            transform: scale(1);
            -o-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .package .special2 .review2 .aimon{
            background: url(images/special2-line2Aimon.png) no-repeat;
            z-index: 4;
            position: absolute;
        }
        .package .special2 .review2 .aim .pic{
            width: 590px;
            height: 190px;
            left: 10px;
            top: 10px;
            position: absolute;
        }
        .package .special2 .review2 .aim .pic img{
            border-radius: 7px;
        }

        .package .special2 .review3{
            position: absolute;
            top: 500px;
            left: 0px;
        }
        .package .special2 .review3 .aim{
            width: 305px;
            height: 200px;
            left: -10px;
            top: -10px;
            position: absolute;
            transform: scale(1);
            -o-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .package .special2 .review3 .aimon{
            background: url(images/special2-line3Aimon.png) no-repeat;
            z-index: 4;
            position: absolute;
        }
        .package .special2 .review3 .aim .pic{
            width: 285px;
            height: 185px;
            left: 10px;
            top: 10px;
            position: absolute;
        }
        .package .special2 .review3 .aim .pic img{
            border-radius: 7px;
        }
    </style>
</head>

<body onload="init();">
<div class="package" id="totalPage"><!-- style="top:-570px;"-->
    <img src="images/specialBg.jpg"/>
    <div class="header">
        <div class="txt" id="box0ListName"></div>
    </div>

    <!--第一页-->
    <div class="special1">
        <div class="line1">
            <div class="aim" id="box0_0">
                <div class="pic"><img id="box0_pic_0" width="590" height="245"></div>
            </div>
            <div class="aim" id="box0_1" style="left:600px;">
                <div class="pic"><img id="box0_pic_1" width="590" height="245"></div>
            </div>
        </div>

        <div class="line2">
            <div class="aim" id="box1_0">
                <div class="pic"><img id="box1_pic_0" width="384" height="190"></div>
            </div>
            <div class="aim" id="box1_1" style="left: 398px;">
                <div class="pic"><img id="box1_pic_1" width="384" height="190"></div>
            </div>
            <div class="aim" id="box1_2" style="left: 806px;">
                <div class="pic"><img id="box1_pic_2" width="384" height="190"></div>
            </div>
        </div>
    </div>

    <!-- 第二页-->
    <div class="special2">
        <div class="special2-header">
            <div class="txt" id="box2ListName"></div>
        </div>

        <div class="review1">
            <div class="aim" id="box2_0">
                <div class="pic"><img id="box2_pic_0" width="590" height="190"></div>
            </div>
            <div class="aim" id="box2_1" style="left:600px;">
                <div class="pic"><img id="box2_pic_1" width="590" height="190"></div>
            </div>
        </div>

        <div class="review2">
            <div class="aim" id="box3_0">
                <div class="pic"><img id="box3_pic_0" width="1200" height="190"></div>
            </div>
        </div>

        <div class="review3">
            <div class="aim" id="box4_0">
                <div class="pic"><img id="box4_pic_0" width="285" height="180"></div>
            </div>
            <div class="aim" id="box4_1" style="left:295px;">
                <div class="pic"><img id="box4_pic_1" width="285" height="180"></div>
            </div>
            <div class="aim" id="box4_2" style="left:600px;">
                <div class="pic"><img id="box4_pic_2" width="285" height="180"></div>
            </div>
            <div class="aim" id="box4_3" style="left:905px;">
                <div class="pic"><img id="box4_pic_3" width="285" height="180"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../js/eZone.js" ></script>
<script type="text/javascript" src="../../js/Ajax.js" ></script>
<script type="text/javascript" src="../../js/tjskip.js" ></script>
<script type="text/javascript" src="../../js/bindList.js" ></script>
<script type='text/javascript'>
    var box0,box1,box2,box3,box4;
    var url = window.location.href;
	var basePath=url.substring(0,url.indexOf("en/page/")+8);
    var boxId =parseInt(Util.getURLPa("boxId",url)==""?"0":Util.getURLPa("boxId",url),10);
    var indexId =parseInt(Util.getURLPa("indexId",url)==""?"0":Util.getURLPa("indexId",url),10);
	var returnUrl=unescape(Util.getURLPa("returnUrl",url)==""?"../index.html":Util.getURLPa("returnUrl",url));
	var seCategoryCode0="10000100000000090000000000002492";//info
	var seCategoryCode1="10000100000000090000000000002494";
	var seCategoryCode2="10000100000000090000000000002495";
	var seCategoryCode3="10000100000000090000000000002493";//info
	var seCategoryCode4="10000100000000090000000000002496";
	var seCategoryCode5="10000100000000090000000000002497";
	var seCategoryCode6="10000100000000090000000000002498";
	var box0List=null;
	var box1List=null;
	var box2List=null;
	var box3List=null;
	var box4List=null;
    function init(){
		if(boxId==2||boxId==3||boxId==4){
			$('totalPage').style.top="-570px";
		}
        createbox();
        createFunction();
		bindAllPicList();
    }
    function createbox(){
        box0 = new eZone.BoxInstance(1, 2, [-1, -1, 1, -1],"box0_");
		box0.setMoveArray(-1, -1,"1-1>2");
        box1 = new eZone.BoxInstance(1, 3, [0, -1, 2, -1],"box1_");
		box1.setMoveArray("1-0>1,2-0>1", -1,"1-2>1,2-2>1");
        box2 = new eZone.BoxInstance(1, 2, [1, -1, 3, -1],"box2_");
		box2.setMoveArray("1-1>2");
        box3 = new eZone.BoxInstance(1, 1, [2, -1, 4, -1],"box3_");
        box4 = new eZone.BoxInstance(1, 4, [3, -1, -1, -1],"box4_");
        //初始化区域
        Wrapper.init(boxId,indexId,[box0,box1,box2,box3,box4]);
		Wrapper.backUrl=returnUrl;
    }
	function bindAllPicList(){
		getUpInfo();
		getUpPicList();
		getUpPicList1();
		getDownInfo();
		getDownPicList();
		getDownPicList1();
		getDownPicList2();
	}
	function getDownPicList2(){
		var ajax= new Ajax("../../hwdatajsp/vodList.jsp?categoryCode="+seCategoryCode6+"&pageIndex=1&pageSize=4&isAjax=1",bindDownPicList2);
		ajax.sendRequese();
	}
	function bindDownPicList2(items){
		box4List=JSON.parse(items);
		bindPicList(box4List,"box4",4);
	}
	function getDownPicList1(){
		var ajax= new Ajax("../../hwdatajsp/vodList.jsp?categoryCode="+seCategoryCode5+"&pageIndex=1&pageSize=1&isAjax=1",bindDownPicList1);
		ajax.sendRequese();
	}
	function bindDownPicList1(items){
		box3List=JSON.parse(items);
		bindPicList(box3List,"box3",1);
	}
	function getDownPicList(){
		var ajax= new Ajax("../../hwdatajsp/vodList.jsp?categoryCode="+seCategoryCode4+"&pageIndex=1&pageSize=2&isAjax=1",bindDownPicList);
		ajax.sendRequese();
	}
	function bindDownPicList(items){
		box2List=JSON.parse(items);
		bindPicList(box2List,"box2",2);
	}
	function getDownInfo(){
		var ajax= new Ajax("../../hwdatajsp/categoryInfo.jsp?categoryCode="+seCategoryCode3+"&isAjax=1",bindDownInfo);
		ajax.sendRequese();
	}
	function bindDownInfo(items){
		var tempList=JSON.parse(items);
		if(tempList.description!=""){
			var tuijianCaInfoName=tempList.name==""?"经典专题回顾":tempList.name;
			$("box2ListName").innerHTML=tuijianCaInfoName;
		}else{
			$("box2ListName").innerHTML="经典专题回顾";
		}
	}
	function getUpInfo(){
		var ajax= new Ajax("../../hwdatajsp/categoryInfo.jsp?categoryCode="+seCategoryCode0+"&isAjax=1",bindUpInfo);
		ajax.sendRequese();
	}
	function bindUpInfo(items){
		var tempList=JSON.parse(items);
		if(tempList.description!=""){
			var tuijianCaInfoName=tempList.name==""?"人气专题":tempList.name;
			$("box0ListName").innerHTML=tuijianCaInfoName;
		}else{
			$("box0ListName").innerHTML="人气专题";
		}
	}
	function getUpPicList(){
		var ajax= new Ajax("../../hwdatajsp/vodList.jsp?categoryCode="+seCategoryCode1+"&pageIndex=1&pageSize=2&isAjax=1",bindUpPicList);
		ajax.sendRequese();
	}
	function bindUpPicList(items){
		box0List=JSON.parse(items);
		bindPicList(box0List,"box0",2);
	}
	function getUpPicList1(){
		var ajax= new Ajax("../../hwdatajsp/vodList.jsp?categoryCode="+seCategoryCode2+"&pageIndex=1&pageSize=3&isAjax=1",bindUpPicList1);
		ajax.sendRequese();
	}
	function bindUpPicList1(items){
		box1List=JSON.parse(items);
		bindPicList(box1List,"box1",3);
	}
    function createFunction() {
        box1.downEvent=function(){
            Util.animate($('totalPage'),{top:-570,duration:600});
        };
        box2.upEvent=function(){ // 上移
            Util.animate($('totalPage'),{top:0,duration:600});
        };
		box0.boxOkEvent=function(){
			if(box0List!=null&&box0List.vodDataList.length>this.curIndex){
				var tempList=box0List.vodDataList[this.curIndex];
				jump(tempList);
			}
		};
		box1.boxOkEvent=function(){
			if(box1List!=null&&box1List.vodDataList.length>this.curIndex){
				var tempList=box1List.vodDataList[this.curIndex];
				jump(tempList);
			}
		};
		box2.boxOkEvent=function(){
			if(box2List!=null&&box2List.vodDataList.length>this.curIndex){
				var tempList=box2List.vodDataList[this.curIndex];
				jump(tempList);
			}
		};
		box3.boxOkEvent=function(){
			if(box3List!=null&&box3List.vodDataList.length>this.curIndex){
				var tempList=box3List.vodDataList[this.curIndex];
				jump(tempList);
			}
		};
		box4.boxOkEvent=function(){
			if(box4List!=null&&box4List.vodDataList.length>this.curIndex){
				var tempList=box4List.vodDataList[this.curIndex];
				jump(tempList);
			}
		}
    }
</script>
<script src="js/probefor/modules_config.js?version=1"></script>
<script src="js/probefor/main_modules.min.js"></script>
</html>
